import { fileURLToPath, URL } from 'node:url'
import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'
import {viteMockServe} from "vite-plugin-mock"
import { visualizer } from 'rollup-plugin-visualizer';
import AutoImport from "unplugin-auto-import/vite";
import VueSetupExtend from "vite-plugin-vue-setup-extend"
import Components from "unplugin-vue-components/vite";
// vite.config.ts
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

import { VantResolver,ElementPlusResolver } from "unplugin-vue-components/resolvers";
import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin';
// import legacyPlugin from '@vitejs/plugin-legacy'; //浏览器兼容性问题



// https://vite.dev/config/
export default defineConfig(({command,mode})=>{
  const env = loadEnv(mode,process.cwd())
   return {
  plugins: [
    vue({
      script: {
        defineModel: true // 启用 defineModel
      }
    }),
    vueJsx(),
    vueDevTools(),
    tailwindcss(),
    viteMockServe({
      mockPath: './src/mock',
      enable:true, //启用mock
    }),
    //全局引入vant组件
     Components({
            resolvers: [
              VantResolver(),
              ElementPlusResolver(),
              // IconsResolver({
              //   prefix: false, // <--设置前缀
              // })
              ],
     }),
    // Icons({
    //   autoInstall: true,
    //   compiler: 'vue3',
    //   scale: 1.2, // Scale of icons against 1em
    //   defaultStyle: '', // Style apply to icons
    //   defaultClass: '', // Class names apply to icons
    // }),
    //vue3组件名自动导入
    VueSetupExtend(),
    //自动导入vue api
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        'pinia',
        {
          'vue-router': ['useRoute', 'useRouter'],
          'pinia': ['defineStore', 'storeToRefs'],
          'vue': ['ref', 'reactive', 'computed', 'watch', 'onMounted', 'onUnmounted'],
          '@vueuse/core': ['useMouse', 'useEventListener']
        }
      ],
      dts: 'src/auto-imports.d.ts',
      eslintrc: {
        enabled: true,
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true
      },
      dirs: [
        './src/composables/**',
        './src/stores/**',
        './src/utils/**'
      ],
      vueTemplate: true
    }),
    //打包分析工具
    visualizer({
      open: true, // 打开浏览器查看报告
      gzipSize: true, // 显示gzip压缩后的文件大小
      // 其他配置项...
    })
  ],
  //scss全局变量一个配置
  css:{
    preprocessorOptions:{
      scss:{
        additionalData:`@import "@/assets/styles/css/bemscss.scss"; @import "@/assets/styles/theme/handle.scss";`
      }
    }

  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  postcss: {
    //移动端适配
    plugins: [
      postcsspxtoviewport8plugin({
        unitToConvert: "px", // 需要转换的单位，默认为"px"
        viewportWidth: 375, // 视窗的宽度，对应移动端设计稿的宽度，一般是375
        landscape: false,
        // viewportHeight:667,// 视窗的高度，对应的是我们设计稿的高度
        unitPrecision: 6, // 单位转换后保留的精度
        propList: [
          // 能转化为vw的属性列表
          "*",
        ],
        viewportUnit: "vw", // 希望使用的视口单位
        fontViewportUnit: "vw", // 字体使用的视口单位
        selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
        minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
        mediaQuery: false, // 媒体查询里的单位是否需要转换单位
        replace: true, // 是否直接更换属性值，而不添加备用属性
        // 只包含特定文件夹下的文件
        // include: [],
        // exclude: /(\/|\\)(node_modules)(\/|\\)/ // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      }),

    ],
  },
  build:{
    minify:'terser',//混淆器
    chunkSizeWarningLimit:1500,//包超限警告
    target: ['chrome52'],//浏览器兼容性
    cssTarget: ["chrome52"],//css兼容性
    terserOptions: {
      compress: {
        //  生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      }
    },
    rollupOptions: {
      output: {
        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        entryFileNames: 'assets/js/[name].[hash].js',
        // 用于输出静态资源的命名，[ext]表示文件扩展名
        assetFileNames: 'assets/[ext]/[name].[hash].[ext]',
        // 用于命名代码拆分时创建的共享块的输出命名
        chunkFileNames: 'assets/js/[name].[hash].js',
        manualChunks(id) {
          // 将 element-plus 单独打包
          if (id.includes('element-plus')) {
            return 'element-plus'
          }
          // 将 lodash 单独打包
          if (id.includes('lodash')) {
            return 'lodash'
          }
          // 其他 node_modules 中的依赖
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      },

    },

  },
  // server: {
  //   hmr: true, // 热更新
  //   proxy:{
  //     [env.VITE_APP_BASE_API]:{
  //       target: env.VITE_SERVE,
  //       changeOrigin: true,
  //       rewrite:(path) => path.replace(/^\/api/, '')
  //     }
  //   }
  // }
}
})
